<template>
	<view>
		<view class="search">
			<u--input placeholder="搜索" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399;" />
			<image src="../../static/images/screen_icon.png" alt="" class="screen" @click="popupShow=true">
		</view>
		<view class="categories">
			<view v-for="item in categories" :class="{active:isActive===item.title}" class="categoriesList"
				@click="changeCategories(item)">
				{{item.title}}
			</view>
		</view>
		<view class="recommend">
			<view class="recommendPost">
				<view class="recommendPostList" @click="toPage('recommendListDetail')">
					<view class="statusLine"></view>
					<view class="status">
						<image src="../../static/images/running.png" alt="" class="statusImg" />
						<text class="running">进行中</text>
					</view>
					<view class="main">
						<view class="title">
							<text class="subtitle">临时</text>
							<text class="maintitle">【教务处】办事大厅助理厅</text>
						</view>
						<view class="department">
							<image src="../../static/images/served.png" alt="" class="served" />
							<text class="departs">新媒体</text>
							<text class="departs">新媒体</text>
							<text class="departs">新媒体</text>
						</view>
						<view class="location">
							<image src="../../static/images/location.png" alt="" class="locationImg" />
							<text>学生活动中心一楼</text>
						</view>
					</view>

					<text class="topRightTips">新生入学用工</text>
					<image src="../../static/images/lock.png" alt="" class="lock" />
				</view>


				<view class="recommendPostList">
					<view class="statusLine"></view>
					<view class="status">
						<image src="../../static/images/over.png" alt="" class="statusImg" />
						<text class="over">已结束</text>
					</view>
					<view class="main">
						<view class="title">
							<text class="subtitle">临时</text>
							<text class="maintitle">【教务处】办事大厅助理厅</text>
						</view>
						<view class="department">
							<image src="../../static/images/served.png" alt="" class="served" />
							<text class="departs">新媒体</text>
							<text class="departs">新媒体</text>
							<text class="departs">新媒体</text>
						</view>
						<view class="location">
							<image src="../../static/images/location.png" alt="" class="locationImg" />
							<text>学生活动中心一楼</text>
						</view>
						<view class="tel">
							<image src="../../static/images/message.png" alt=""
								style="vertical-align:middle;margin-right: 18rpx;width: 48rpx;height: 48rpx;border: 2px solid #EBF5F0;border-radius: 50%;">
								<text>张三瑞</text>
								<text class="line">|</text>
								<image src="../../static/images/tel.png" class="telImg"></image>
								<text>17280340636</text>
						</view>
					</view>
					<text class="topRightTips">迎新</text>
				</view>
			</view>
		</view>

		<u-popup :show="popupShow" mode="top" @close="close" @open="open">
			<view :style="{'height':windowHeight}" style="position: relative;">
				<u-icon @click="close" name="close" size="20" style="position: absolute;right: 32rpx;top: 62rpx;" />
				<text class="typeTitle">部门/学院</text>
				<view class="screenBox">
					<view class="typeItem" :class="item == depart?'typeBlue':''" v-for="(item, i) in departList"
						:key="i" @click="changeDepart(item)">
						{{item}}
					</view>
				</view>
				<text class="typeTitle">用工类型</text>
				<view class="screenBox">
					<view class="typeItem" :class="item == type?'typeBlue':''" v-for="(item, i) in typeList" :key="i"
						@click="changeType(item)">
						{{item}}
					</view>
				</view>
				<text class="typeTitle">状态</text>
				<view class="screenBox">
					<view class="typeItem" :class="item == status?'typeBlue':''" v-for="(item, i) in statusList"
						:key="i" @click="changeStatus(item)">
						{{item}}
					</view>
				</view>
				<text class="typeTitle">标签</text>
				<view class="screenBox">
					<view class="typeItem" :class="item == tags?'typeBlue':''" v-for="(item, i) in tagsList" :key="i"
						@click="changeTags(item)">
						{{item}}
					</view>
				</view>
				<view class="screenBtns">
					<u-button class="custom-style" text="重置" plain @click="reset"></u-button>
					<u-button class="custom-style" text="确认" plain @click="confirm"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				popupShow: false,
				isActive: '推荐',
				categories: [{
						title: '推荐'
					},
					{
						title: '常规'
					},
					{
						title: '项目'
					},
					{
						title: '临时'
					},
					{
						title: '其他'
					},
				],
				windowHeight: "0",
				departList: [
					'不限', '教务处', '学生处', '科研处', '人事处'
				],
				depart: '',
				typeList: [
					'不限', '常规', '项目', '临时', '其他'
				],
				type: '',
				statusList: [
					'不限', '进行中', '已结束'
				],
				status: '',
				tagsList: [
					'不限', '新媒体', '引导员'
				],
				tags: '',

			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = (res.windowHeight + 44) + "px";
				}
			})
		},
		methods: {
			changeCategories(item) {
				this.isActive = item.title
			},
			close() {
				this.popupShow = false
			},
			changeDepart(item) {
				this.depart = item
			},
			changeType(item) {
				this.type = item
			},
			changeStatus(item) {
				this.status = item
			},
			changeTags(item) {
				this.tags = item
			},
			reset() {
				this.type = '';
				this.status = '';
				this.depart = '';
				this.tags = '';
			},
			toPage(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #FAFAFA;
	}

	.u-input {
		background: #F4F5F7;
		display: inline-block;
		width: 90%;
		border-radius: 8px;
	}

	.active {

		color: #2674FF !important;
	}

	.categories {
		height: 88rpx;
		line-height: 40px;
		background-color: #fff;
		display: flex;
		justify-content: center;

		.categoriesList {
			flex: 0 0 20%;
			font-size: 30rpx;
			text-align: center;
			color: #999999;
			font-weight: 400;
		}
	}

	.recommend {
		margin: 24rpx 32rpx;
	}
</style>
